<!--
暂时支持两种组合方式
select+input
input+input
-->
<template>
  <div class="container">
    <Select
      v-bind="attrs.select"
      v-model="firstValueCopy"
    >
      <Option
        v-for="item in selectList"
        :value="item.value"
        :key="item.value"
        >{{ item.label }}</Option
      >
    </Select>
    <Input
      v-bind="attrs.input"
      v-model="secondValueCopy"
      placeholder="Enter something..."
    />
  </div>
</template>

<script setup lang="ts">
import { ref, PropType, watch } from 'vue'
interface ListType {
  value: string
  label: string
}

const props = defineProps({
  type: {
    type: String,
    default: 'select'
  },
  firstValue: {
    type: String,
    default: ''
  },
  secondValue: {
    type: String,
    default: ''
  },
  selectList: {
    type: Array as PropType<ListType[]>,
    default: () => []
  },
  attrs: {
    type: Object,
    default: () => {}
  }
})

const firstValueCopy = ref('')
const secondValueCopy = ref('')

watch(
  () => props.firstValue,
  (value) => {
    firstValueCopy.value = value
  }
)
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
}
</style>
